import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:xin_he/page/mine/xin_he_mine_orders/xin_he_mine_order_detail/xin_he_new_order_detail_entity.dart';

import '../../../routes/xin_he_routes.dart';
import '../../../utils/xh_styles.dart';
import '../../../utils/xin_he_UI_constancs.dart';
import '../../../utils/xin_he_image.dart';
import '../../../utils/xin_he_order_utils.dart';
import '../../home/views/xin_he_tab_custom_indicator.dart';
import '../../shopping_car/models/xin_he_goods_model.dart';
import '../../shopping_car/xin_he_instant_pay/xin_he_instant_pay_view.dart';
import 'xin_he_mine_orders_logic.dart';

class XinHeMineOrdersPage extends StatelessWidget {
  XinHeMineOrdersPage({Key? key}) : super(key: key);

  final logic = Get.put(XinHeMineOrdersLogic());
  final state = Get.find<XinHeMineOrdersLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Obx(() => Scaffold(
      appBar: AppBar(
        leading: IconButton(
            onPressed: (){
              Get.back();
            },
            icon: Container(
              padding: EdgeInsets.only(left: 7),
              alignment: Alignment.centerLeft,
              child: const XinHeAssetImage(
                'assets/images/home/app_back_3.png',
                width: 9.5,
                height: 17,
                fit: BoxFit.cover,),
            )
        ),
        backgroundColor: Colors.white,
        shadowColor: Colors.transparent,
        title: Text('订单',style: TextStyle(color:XinHeColor('##222222'),fontSize: 17,fontWeight: FontWeight.w600)),
        centerTitle: true,
      ),
      body: SizedBox(
        width: Get.width,
        height: Get.height-Get.mediaQuery.padding.top-44,
        child: Column(
          children: [
            _tabsView(),
            logic.isLoading.value == false?Obx(() => state.orderList.length >0 ? Expanded(
              child: ListView.builder(
                  padding: EdgeInsets.only(bottom: 15),
                  itemCount: state.orderList.length,
                  itemBuilder: (ctx,index){
                    XinHeNewOrderDetailEntity model = state.orderList[index];
                    return _itemsView(model, index);
                  }),
            ):  Container(height: 100,alignment: Alignment.center,child: Text('暂无数据'),)):const Expanded(child: CupertinoActivityIndicator(),),
          ],
        ),
      ),
    ));
  }



  Widget _tabsView() {
    return  Container(
      height: 44,
      color: Colors.white,
      margin: const EdgeInsets.symmetric(horizontal: 0),
      child: TabBar(
          onTap: (index){
              logic.currentIndex.value = index;
              logic.changeTabAndRequest(index);
          },
          controller: logic.tabsTabController,
          labelColor: XinHeColor('#2B3131'),
          unselectedLabelColor: XinHeColor('#909696'),
          labelStyle: const TextStyle(fontSize: 15,fontWeight: FontWeight.w600 ),
          unselectedLabelStyle: const TextStyle(fontSize: 13,fontWeight: FontWeight.w400 ),
          indicator: RoundedTabIndicator(width: 29,height: 2),
          indicatorPadding: const EdgeInsets.only(top: 8),
          // labelPadding: EdgeInsets.symmetric(horizontal: logic.getPaddingWidth()) ,
          tabs: logic.tabList.map((e) => Container(
            height: 44,
            alignment: Alignment.center,
            child: Text(e,softWrap: false,),
          )).toList()

      ),
    );
  }

  Widget _itemsView(XinHeNewOrderDetailEntity model,int section) {
    return Container(
      height: 247-120+ 120.0*model.orderItems!.length,
      margin: const EdgeInsets.symmetric(horizontal: 15).copyWith(top: 15),
      padding: const EdgeInsets.symmetric(horizontal: 15).copyWith(top: 15),
      decoration: BoxDecoration(borderRadius: BorderRadius.circular(15),color: Colors.white),
      child: Column(children: [
        
        Row(children: [
            const XinHeAssetImage('assets/images/cart/cart_unselected.png',width: 18,height: 18,),
            SizedBox(width: 5,),
            Text(XinHeShopInfo.name,style: TextStyle(color: XinHeColor('#282C2C'),fontSize: 13,fontWeight: FontWeight.w500),),
            const SizedBox(width: 3,),
            const XinHeAssetImage('assets/images/cart/pay_arrow.png',width: 6,height: 10,),
            Spacer(),
            Text(logic.getTitle(model.status!),style: TextStyle(color: XinHeStyle.mainGreenColor,fontSize: 13,fontWeight: FontWeight.w600),),


          ],),


        ListView.builder(
            physics: const NeverScrollableScrollPhysics(),
            shrinkWrap: true,
            itemCount: model.orderItems?.length,
            itemBuilder: (ctx,ind){
              XinHeNewOrderDetailOrderItems item = model.orderItems![ind];
              return _goodsItemView(item, ind, section);
            }),

        SizedBox(height: 10,),
        SizedBox(
          height: 18,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
            RichText(text: TextSpan(children: [
              TextSpan(text:'合计',style: TextStyle(color: XinHeColor('#555555'),fontSize: 12)),
              TextSpan(text: '￥',style: TextStyle(color: XinHeColor('#E33F3F'),fontSize: 12)),
              TextSpan(text: '${model.orderFee}',style: TextStyle(color: XinHeColor('#E33F3F'),fontSize: 15))
            ])),
          ],),
        ),

        SizedBox(height: 10,),
        Row(children: [
          Spacer(),
          GestureDetector(
            onTap: (){
              Get.toNamed(XinHeRoutes.orderDetail,arguments: {'orderId':model.id});
            },
            child: Container(
              height: 30,
              width: 75,
              alignment: Alignment.center,
              decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(15),
                  border: Border.all(color: XinHeColor('#B9B9B9'),width: 0.5)
              ),
              child: Text('订单详情',style: TextStyle(color: XinHeColor('#666666'),fontSize: 14),strutStyle: const StrutStyle(forceStrutHeight: true)),
            ),
          ),
          const SizedBox(width: 10,),
          GestureDetector(
            onTap: (){
              logic.rightButtionAction(model);
            },
            child: Container(
              height: 30,
              width: 75,
              alignment: Alignment.center,
              decoration: BoxDecoration(
                  gradient: LinearGradient(colors: [ XinHeColor('##F89A30'), XinHeColor('#E84128')]),
                  borderRadius: BorderRadius.circular(15),
              ),
              child:  Text(logic.getRightButtonTitle(model.status!),style: TextStyle(color: Colors.white,fontSize: 14),strutStyle: StrutStyle(forceStrutHeight: true),),
            ),
          ),
          
        ],)





      ],),);
  }

  Widget _goodsItemView(XinHeNewOrderDetailOrderItems model,int index,int section){
    return Stack(
      children: [
        Container(
          color: Colors.white,
          width: Get.width-30,
          height: 120,

          child:  Row(
            children: [

               Padding(
                padding:  const EdgeInsets.only(left: 0,top: 15,right: 15,bottom: 15),
                child: XinHeNetImage(url: model.iconPath??'',width: 80,height: 80,fit: BoxFit.fill),
              ),

              ///描述与价格数量
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  SizedBox(
                      width:Get.width-30-80-30-15,
                      child: Text(model.goodsName??'' ,maxLines: 2,softWrap: true,style: TextStyle(color: XinHeColor('#222222'),fontSize: 14,fontWeight: FontWeight.bold),)
                  ),
                  const SizedBox(height: 20,),



                  SizedBox(
                    width:Get.width-30-80-30-15,
                    height: 23,
                    child: Row(
                      children: [

                        RichText(
                            text: TextSpan(children: [
                              ///￥
                              TextSpan(
                                text: '￥',
                                style: TextStyle(
                                  color: XinHeColor('#E84128'),
                                  fontSize: 9,
                                  fontWeight: FontWeight.w500,
                                ),
                              ),

                              ///
                              TextSpan(
                                text: '${model.itemPrice}',
                                style: TextStyle(
                                  color: XinHeColor('#E84128'),
                                  fontSize: 16,
                                  fontWeight: FontWeight.w500,
                                ),
                              ),

                            ]
                            )),
                        const Spacer(),

                        Text('x${model.goodsAmount}',style: TextStyle(color: XinHeColor('#8B9191'), fontSize: 12, fontWeight: FontWeight.w500,)
                        ),
                        const SizedBox(width: 0,)

                      ],
                    ),
                  )

                ],)


            ],
          ),
        ),

        Positioned(
          bottom: 0,
          right: 15,
          child: Container(
            width: Get.width-30-30,
            color: XinHeColor('#E7EEEE'),
            height: 0.5,),
        )

      ],
    );
  }


}
